<!-- 5S检查问题提交 -->
<template>
	<view class="content">
		<u-navbar :fixed="false" title="历史问题列表" :autoBack="true" :safeAreaInsetTop="true" leftIconColor="#fff">
		</u-navbar>

		<scroll-view class="srv" :scroll-y="true">
			<view class="cardBox" v-for="(item,index) in dataList" :key="item.FSDealID">
				<view class="form-row">
					<text class="form-label">本项扣分:</text>
					<text class="form-input">{{item.Score}}</text>
				</view>
				<view class="form-row">
					<text class="form-label">责任人员:</text>
					<text class="form-input">{{item.ToUserName}}</text>
				</view>
				<view class="form-row">
					<text class="form-label">问题描述:</text>
					<text class="form-input">{{item.Description}}</text>
				</view>
				<view class="form-row">
					<text class="form-label">现场照片:</text>
					<view class="form-input">
						<view class="image-container">
							<image v-for="(img,imgIdx) in item.DDImgs" :src="img" :key="imgIdx" mode="aspectFill"
								class="image-item" @click="previewImage(img)"></image>
						</view>
					</view>
				</view>
				<view class="form-row">
					<text class="form-label">上报时间:</text>
					<text class="form-input">{{item.CreateTime}}</text>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				dataList: []
			};
		},
		created() {

		},
		mounted() {

		},
		methods: {
			// 图片预览
			previewImage(img) {
				uni.previewImage({
					urls: [img]
				})
			},

			getDataList(id) {
				let that = this;
				this.$utils.showLoading();
				that.Request.request('5S_GetDealByDaily', {
						DailyFSDeID: id
					}, function(data) {
						that.$utils.hideLoading();
						that.dataList = data.data.ds.map(item => {
							let dimgs = [];
							let fimgs = [];
							if (item.DImgs) {
								dimgs = item.DImgs.split(',');
							}
							if (item.FImgs) {
								fimgs = item.FImgs.split(',');
							}
							if (dimgs.length) {
								dimgs = dimgs.map(img => (that.Request.IPAgreement() + that.Request
									.serverIP() + img));
							}
							if (fimgs.length) {
								fimgs = fimgs.map(img => (that.Request.IPAgreement() + that.Request
									.serverIP() + img));
							}
							return {
								...item,
								DDImgs: dimgs,
								FFImgs: fimgs
							}
						})

						// console.log(that.dataList);
					}, function(err) {

					}, that.Request.IPAgreement() + that.Request.serverIP() +
					'/Frame/SqlData', 1)
			},
		},
		onLoad(option) {
			if (option.DailyFSDeID) {
				this.getDataList(option.DailyFSDeID);
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		display: flex;
		flex-direction: column;
		height: 100vh;
		background-color: #f2f2f2;

		.srv {
			display: flex;
			flex-direction: column;
			height: calc(100vh - (44px + env(safe-area-inset-top) + env(safe-area-inset-bottom) / 2));
			padding: 10px;

			.cardBox {
				display: flex;
				flex-direction: column;
				border-radius: 5px;
				background-color: #ffffff;
				margin-bottom: 10px;
				padding: 10px;

				.form-row {
					display: flex;
					align-items: center;
					padding: 10px 0;
					border-bottom: 1rpx solid #ddd;
				}

				.form-require {
					width: 10px;
					color: #FF0000;
				}

				.form-label {
					width: 100px;
					color: #333;
					font-size: 14px;
				}

				.form-input {
					flex: 1;
					padding: 0 5px;
					border: none;
					background-color: transparent;
					font-size: 14px;
				}
			}
		}

		.image-container {
			display: flex;
			flex-wrap: wrap;
			gap: 10px;
			padding: 10px 10px 10px 0;
		}

		.image-item {
			width: 66px;
			height: 66px;
			border-radius: 5px;
			object-fit: cover;
		}
	}
</style>